<template>
  <div class="main">
    <!-- 头部 -->
    <main-header />
    <div style="display: flex">
      <!-- 侧边栏 -->
      <main-aside />
      <router-view style="flex: 1" />
    </div>

    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, onMounted } from 'vue'

import MainHeader from '@/components/Header'
import MainAside from '@/components/Aside'
import localCache from '@/utils/cache'
import { useStore } from '@/store'

export default defineComponent({
  components: {
    MainHeader,
    MainAside,
  },
  setup() {
    onMounted(() => {
      refreshUser()
    })

    let user = reactive({})
    const refreshUser = () => {
      user = JSON.parse(localCache.getCache('user'))
      if (!user) {
        const store = useStore()
        const userId = JSON.parse(user).id
        store.dispatch('login/getUserInfoByID', userId)
        user = computed(() => {
          return store.state.login.userInfo
        })
      }
    }
    return {
      user,
    }
  },
})
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
}
</style>
